<div class="modalPanel" [dMovable]="true" [handle]="header" [moveEl]="parent">
  <div class="modal-header" #header>{{headerTitle}}</div>
  <div class="modal-form">
    <div *ngFor="let item of formList;let i = index;">
      <div *ngIf="item.type === 'radio'">
        <div class="questionStem">{{item.questionStem}}<i *ngIf="item.required">&nbsp;&nbsp;*</i></div>
        <d-radio-group [ngStyle]="radioGroupStyle" [direction]="'row'" [(ngModel)]="item.currVal"
          (change)="log($event,item.serialNumber)">
          <d-radio [name]="item.name" *ngFor="let value of item.answerOptions" [value]="value.value"> {{ value.title }}
          </d-radio>
        </d-radio-group>
      </div>
      <div *ngIf="item.type === 'checkbox'">
        <div class="questionStem">{{item.questionStem}}<i *ngIf="item.required">*</i></div>
        <div style="margin:8px 0 8px 20px">
          <d-checkbox-group [(ngModel)]="item.values" [name]="item.name" [filterKey]="'name'"
            [options]="item.answerOptions || []" [direction]="'row'" [isShowTitle]="true"
            (change)="log($event,item.serialNumber)">
          </d-checkbox-group>
        </div>
      </div>
      <div class="inputContainer" *ngIf="item.type === 'input'">
        <div class="questionStem">{{formList[6].questionStem}}<i *ngIf="formList[6].required">*</i></div>
        <textarea #textareaVal maxlength="300" (keydοwn)="verifyTextarea($event)" (keyup)="verifyTextarea($event)"
          [placeholder]="item.placeholder" dTextarea (change)="log($event,item.serialNumber)"></textarea>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <d-button (click)="close(false)" bsStyle="primary" circled="true">{{ data.cancelBtnText }} </d-button>
  </div>
  <i class="icon-close" (click)="close(true)"></i>
</div>
